<template>
  <div class="wrap-bg">
    <div class="head-bg h-360" :style="{background: `url(${getAssetsImages('patent-head-bg')})`, 'background-size': '100% 100%'}">
    </div>
    <div class="content padlr320">
        <div class="head-tit pad-t76">智能解析1.78亿全球专利，一键生成技术情报</div>
        <div class="head-search-box pad20 mar-t56">
            <div class="search-ipt flex-a">
                <div class="search-l  flex-a">
                    <div class="l-menu pad-l18 flex-a">
                        <el-dropdown>
                            <div class="flex-a search-txt ">
                                <div class="mar-r8 w-28">中国</div>
                                <el-icon>
                                    <caret-bottom size="12" />
                                </el-icon>
                            </div>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>中国</el-dropdown-item>
                                    <el-dropdown-item>Action 2</el-dropdown-item>
                                    <el-dropdown-item>Action 3</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        
                    </div>
                    <div class="search-line marlr20 "></div>
                    <div class="search-icon mar-r10">
                        <el-image 
                            style="width: 20px; height: 20px" 
                            :src="getAssetsImages('search-icon')" 
                        />
                    </div>
                    <el-input
                        v-model="searchKey"
                        style="height: 56px; "
                        placeholder="请输入商标名称、申请号或申请人名称"
                    >
                    </el-input>
                </div>
                <div class="search-btn ">
                    立即搜索
                </div>
            </div>
            <div class="fast-box mar-t12 flex-a">
                <div class="fast-tit mar-r12">
                    快捷入口
                </div>
                <div class="fast-list flex">
                    <div 
                        class="fast-li padlr11 mar-r10" 
                        v-for="(item, index) in fastList"
                        :key="index"
                    >
                        {{ item.name }}
                    </div>
                </div>
            </div>
        </div>
        
        <div class="block-card-box mar-t40 flex mar-t60">
            <div class="card-l flex flex-wrap ">
                <div 
                    class="card-li pad-r20" 
                    v-for="(item, index) in blockBox.cardList"
                    :key="index"
                    @click="blockBox.cardIndex = index"
                    
                >
                    <div 
                        class="card-li-item padlr20 padtb20"
                        :style="{
                            background: index === blockBox.cardIndex ? `url(${getAssetsImages('card-bg2')}) no-repeat` : '' , 
                            'background-size': '100% 100%'
                        }"
                        :class="{'mar-t20': index > 1}"
                    >
                        <div class="card-tit flex-a ju-bt">
                            <div class="flex-a">
                                <span class="tit-txt">{{ item.title }}</span>
                                <span 
                                    v-if="item.dotTxt"
                                    class="tit-hot mar-l7"
                                    :style="{background: item.bgcor}"
                                >{{ item.dotTxt  }}</span>
                            </div>
                            <el-image 
                                @click="onCardLi(item)"
                                style="width: 30px; height: 30px" 
                                :src="getAssetsImages('arrows-icon')" 
                            />
                        </div>
                        <div class="card-tips mar-t8">
                            {{ item.tips }}
                        </div>
                        <div class="card-price mar-t14 flex-a ju-bt">
                            <div class="card-price-info">
                                <span class="price-unit">￥</span>
                                <span class="price-num">2500.00</span>
                                <span class="price-label">/件起</span>
                            </div>
                            <!-- <div 
                                class="price-btn"
                                :class="{'price-btn-on': index === blockBox.cardIndex}"
                            >
                                立即购买
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-r-notice pad20 flex-col ju-bt">
                <div class="notice-list padlr20 padtb17">
                    <div 
                        class="notice-list-li flex-a "
                        v-for="(item, index) in blockBox.noticeList"
                        :key="index"
                        :class="{'mar-t18': index}"
                    >
                        <el-image 
                            style="width: 20px; height: 20px;" 
                            :src="getAssetsImages('notice-icon')" 
                        />
                        <div class="li-txt pad-l10 text-elpis">
                            公告：关于组织开展软件名园(第二批)申报…
                        </div>
                    </div>
                </div>
                <div class="notice-btn mar-t10 flex flex-wrap ju-bt">
                    <div 
                        class="btn flex-center"
                        v-for="(item, index) in blockBox.noticeBtns"
                        :key="index"
                        :class="{'mar-t14': index > 1}"
                    >
                        <el-image 
                            style="width: 28px; height: 28px;" 
                            :src="getAssetsImages(item.img)" 
                        />
                        <div class="mar-l14">{{ item.name }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div 
        class="advertising-box h-156 pad-l320 mar-t40 flex-a"
        :style="{
            background: `url(${getAssetsImages('patent-card-bg')}) no-repeat`,
            'background-size': '100%',
        }"
    >
        <div class="advertising-info">
            <div class="info-txt">
                专利监控助力企业实时跟踪最新技术动态，及时做好研发布局
            </div>
            <div class="info-detail-btn mar-t24">立即使用</div>
        </div>
    </div>
    <div class="block-tabs mar-t60 padlr320">
        <div class="tabs-tit">
            精选专利服务
        </div>
        <tabs-list 
            :tabsList="blockTabs.tabsList"
            @changeTabs="blockTabsChange"
        ></tabs-list>
    </div>
    <div class="block-tabs-card flex padtb40 padlr320" v-if="blockBox?.cardInfo?.info?.title">
        <div class="card-l" >
            <el-image 
                style="height: 160px;" 
                :src="getAssetsImages('card-bg3')" 
            />
            <div class="card-l-info padlr20 pad-t10 pad-b19">
                <div class="info-tit">{{ blockBox?.cardInfo?.info?.title }}</div>
                <div class="info-tips mar-t8">{{ blockBox?.cardInfo?.info?.describe }}</div>
                <div class="info-price mar-t25">
                    <span class="price-unit">￥</span>
                    <span class="price-num">{{ blockBox?.cardInfo?.info?.price }}</span>
                    <span class="price-label">/件起</span>
                </div>
                <div class="info-btn flex ju-bt mar-t12">
                    <div class="btn" @click="onCardLi(blockBox.cardInfo.info)">查看详情</div>
                    <div class="btn btn2" >立即购买</div>
                </div>
            </div>
        </div>
        <div class="card-list  flex flex-wrap">
            <div 
                class="card-li pad-l20" 
                v-for="(item, index) in blockBox?.cardInfo?.child"
                :key="index"
                @click="blockBox.cardIndex2 = index"
            >
                <div 
                    class="card-li-item pad20"
                    :style="{
                        background: index === blockBox.cardIndex2 ? `url(${getAssetsImages('card-bg2')}) no-repeat` : '' , 
                        'background-size': '100% 100%'
                    }"
                    :class="{'mar-t20': index > 1}"
                >
                    <div class="card-tit flex-a ju-bt">
                        <div class="flex-a">
                            <span class="tit-txt">{{ item.title }}</span>
                            <!-- <span 
                                v-if="item.dotTxt"
                                class="tit-hot mar-l7"
                                :style="{background: item.bgcor}"
                            >{{ item.dotTxt  }}</span> -->
                        </div>
                        <el-image
                            @click="onCardLi(item, index)"
                            style="width: 30px; height: 30px" 
                            :src="getAssetsImages('arrows-icon')" 
                        />
                    </div>
                    <div class="card-tips mar-t8">
                        {{ item.describe }}
                    </div>
                    <div class="card-price mar-t20 flex-a ju-bt">
                        <div class="card-price-info">
                            <span class="price-unit">￥</span>
                            <span class="price-num">{{ item.price }}</span>
                            <span class="price-label">/件起</span>
                        </div>
                        <div 
                            class="price-btn"
                            :class="{'price-btn-on': index === blockBox.cardIndex}"
                        >
                            立即购买
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padlr320">
        <div class="reason-fo-application mar-t60">
            <div class="reason-tit">为什么要申请专利</div>
            <div class="reason-tips mar-t2">一站式多元服务，高效省时省心，品牌资产全力护航</div>
            <div class="reason-list flex ju-ar mar-t30">
                <div 
                    class="reason-li pad30"
                    v-for="(item, index) in reasonList"
                    :key="index"
                    :style="{
                        background: `url(${getAssetsImages(item.img)}) no-repeat`, 
                        'background-size': '100% 100%'
                    }"
                >
                    <div class="li-name">{{ item.name }}</div>
                    <div class="li-tips mar-t10">{{ item.tips }}</div>
                </div>
            </div>
        </div>
    </div>
    <service-process :service_id="service_id" parentType="tos"></service-process>
    <advantage :service_id="service_id" parentType="tos"></advantage>
    <find-out-details></find-out-details>
  </div>
</template>

<script setup>
/**
 * 专利服务
*/
// 商标服务
import { ref } from "vue";
// 了解详情组件
import findOutDetails from "@/components/findOutDetails/index.vue"
// 服务流程组件
import serviceProcess from "@/components/serviceProcess/index.vue"
// 平台优势组件
import advantage from "@/components/advantage/advantage.vue"
// tabs list 组件
import tabsList from "@/components/tabsList/index.vue"
import serviceApi from "@/api/modules/trademarkService.js"
const router = useRouter();
const route = useRoute()
const service_id = ref(route.query.id ?? '')
const toPath = (url, item) => {
    if(!item) return
       router.push({
        path: url,
        query: {
            id: item.id,
            title: item.title,
        }
    });
};
let searchKey = ref("")

let fastList = ref([
    {
        name: "高级检索",
    },
    {
        name: "语义检索",
    },
    {
        name: "图像检索",
    },
    {
        name: "批量检索",
    },
    {
        name: "法律检索",
    },
])

let blockBox = reactive({
    cardList: [
        {
            title: "发明专利申请",
            tips: "保护企业研发创新成果，提升企业核心竞争力",
            price: "2500.00",
            hot: 1,
            bgcor: "#FF4D00",
            dotTxt: "Hot",
            path: "patentApplication"
        },
        {
            title: "海外国家专利申请",
            tips: "保护企业研发创新成果，提升企业核心竞争力",
            price: "2500.00",
            new: 1,
            bgcor: "#00B77F",
            dotTxt: "New",
        },
        {
            title: "专利权恢复",
            tips: "保护企业研发创新成果，提升企业核心竞争力",
            price: "2500.00",
        },
        {
            title: "专利价值评估",
            tips: "保护企业研发创新成果，提升企业核心竞争力",
            price: "2500.00",
        },
    ],
    cardIndex: 0,
    cardList2: [
        {
            name: "优先申请与快速预审备案",
            tips: "保护企业研发创新成果，提升企业核心竞争力",
            price: "2500.00",
            hot: 1,
            bgcor: "#FF4D00",
            dotTxt: "Hot"
        },
        {
            name: "专利查新检索",
            tips: "保护企业研发创新成果，提升企业核心竞争力",
            price: "2500.00",
            new: 1,
            bgcor: "#00B77F",
            dotTxt: "New",
        },
        {
            name: "专利监控",
            tips: "保护企业品牌资产，提升企业品牌影响力",
            price: "2500.00",
        },
        {
            name: "专利检索报告",
            tips: "保护企业品牌资产，提升企业品牌影响力",
            price: "2500.00",
            path: "patentSearchReport"
        },
    ],
    cardIndex2: 2,
    cardInfo: {}, 
    noticeList: [1, 1, 1],
    noticeBtns: [
        {
            name: "专利导航",
            img: "patent-notice1"
        },
        {
            name: "专利预警分析",
            img: "patent-notice2"
        },
        {
            name: "帮助文档",
            img: "patent-notice3"
        },
    ]
})
const blockTabs = reactive({
    tabsList: [],
    currentTabs: 0,
})
let reasonList = ref([
    {
        name: "保护生产",
        tips: "防止他人模仿本企业开发的新技术 新产品，杜绝侵权",
        img: "reason-bg1"
    },
    {
        name: "技术变现",
        tips: "通过专利技术转让、授权。入股 质押货款等方法，资产变现",
        img: "reason-bg2"
    },
    {
        name: "占有市场",
        tips: "一种产品只要授子专利权，就等于在市场上具有了独占权",
        img: "reason-bg3"
    },
    {
        name: "企业资质",
        tips: "增加企业资质及技术含量，提高市场竞争力",
        img: "reason-bg4"
    },
])
const blockTabsChange = index => {
    blockTabs.currentTabs = index;
    getList();
}
// 获取tabs
const getServiceType = () => { 
    return serviceApi.serviceType({
        pid: service_id.value
    }).then(res => { 
        blockTabs.tabsList = res.data
    })
}
// 获取列表
const getList = () => { 
    return serviceApi.getList({
        type: blockTabs?.tabsList[blockTabs.currentTabs]?.id ?? '',
        is_all: 0
    }).then(res => { 
        // blockBox.cardList2 = res.data.child
        // blockBox.cardInfo = res.data.info
        blockBox.cardInfo = res.data;
    })
}
const initfun = async () => { 
    await getServiceType()
    await getList();
}
initfun()
const routerPaths = [
    {
        key: "发明专利申请",
        path: "patentApplication"
    },
    {
        key: "审查意见答复",
        path: "patentApplication"
    },
    {
        key: "专利检索报告",
        path: "patentSearchReport"
    },
]
const onCardLi = (item, index) => { 
    if (index) { 
        blockBox.cardIndex2 = index;
    }
    routerPaths.forEach(routerItem => { 
        // if (routerItem.key == item.title) {
        //     toPath(routerItem.path, item.id)
        // }
        toPath('productDetail', item)
        return
        if (item.title == '专利检索报告') {
            toPath('patentSearchReport', item)
        } else { 
            toPath('patentApplication', item)

        }
    })
}
const getAssetsImages = name => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>
.reason-fo-application {
    .reason-tit {
        font-size: 28px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: Medium;
        text-align: center;
        color: #202020;
    }
    .reason-tips {
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: center;
        color: #646770;
    }
    .reason-li {
        width: 305px;
        height: 440px;
        background: linear-gradient(180deg,#1c8cbc 0%, rgba(29,140,188,0.00) 50%);
        .li-name {
            font-size: 24px;
            font-family: PingFang SC, PingFang SC-Semibold;
            font-weight: Semibold;
            text-align: center;
            color: #ffffff;
        }
        .li-tips {
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: center;
            color: rgba(255,255,255,.6);
            line-height: 26px;
        }
    }
}
.block-tabs {
    .tabs-tit {
        font-size: 28px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: Medium;
        text-align: center;
        color: #181818;
    }
    
}
.block-tabs-card {
        height: 430px;
        background: #f5f7fa;
        .card-l {
            height: 351px;
            width: 412px;
            background: linear-gradient(180deg,#f0f3f7, #ffffff);
            border: 2px solid #ffffff;
            box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
            .card-l-info {
                .info-tit {
                    font-size: 16px;
                    font-family: PingFang SC, PingFang SC-Semibold;
                    font-weight: Semibold;
                    text-align: left;
                    color: #181818;
                }
                .info-tips {
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Regular;
                    font-weight: Regular;
                    text-align: left;
                    color: #575966;
                }
                .info-price {
                    .price-unit,
                    .price-num {
                        color: #ff4600;
                    }  
                    .price-num {
                        font-size: 28px;
                        font-family: PingFang SC, PingFang SC-Semibold;
                        font-weight: Semibold;
                        text-align: left;
                    }
                    .price-label {
                        font-size: 14px;
                        font-family: PingFang SC, PingFang SC-Regular;
                        font-weight: Regular;
                        text-align: left;
                        color: #181818;
                    }
                }
                .info-btn {
                    .btn {
                        width: 176px;
                        height: 40px;
                        border: 1px solid #0052d9;
                        border-radius: 2px;
                        font-size: 16px;
                        font-family: PingFang TC, PingFang TC-Regular;
                        font-weight: Regular;
                        text-align: center;
                        color: #0052d9;
                        line-height: 40px;
                    }
                    .btn2 {
                        background: #0052d9;
                        color: #fff;
                    }
                    
                }
            }
        }
        .card-list {
            width: calc(100% - 412px) ;
            height: 351px;
        }
    }
:deep(.search-txt:focus) {
  outline: none;
}
:deep(.el-input__wrapper) {
    box-shadow: none;
    flex-grow: 0;
    background: transparent ;
    width: 100%;
}
.advertising-box {
    .advertising-info {
        .info-txt {
            font-size: 28px;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: Medium;
            text-align: left;
            color: #202020;
        }
        .info-detail-btn {
            width: 130px;
            height: 40px;
            background: #0052d9;
            border-radius: 2px;
            font-size: 16px;
            font-family: PingFang TC, PingFang TC-Regular;
            font-weight: Regular;
            text-align: center;
            color: #ffffff;
            line-height: 40px;
        }
    }
}
.card-li {
    width: 50%;
    .card-li-item {
        // height: 140px;
        background: linear-gradient(180deg,#f0f3f7, #ffffff);
        border: 2px solid #ffffff;
        border-radius: 4px;
        box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
        .card-tit {
            .tit-txt {
                font-size: 16px;
                font-family: PingFang SC, PingFang SC-Semibold;
                font-weight: bold;
                text-align: left;
                color: #181818;
            }
            .tit-hot {
                width: 30px;
                height: 16px;
                background: #ff4d00;
                border-radius: 6px 6px 6px 2px;
                font-size: 12px;
                font-family: PingFang SC, PingFang SC-Regular;
                font-weight: bold;
                text-align: center;
                color: #ffffff;
                line-height: 17px;
            }
        }
        .card-tips {
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: left;
            color: #575966;
        }
        .card-price {
            .price-unit,
            .price-num {
                color: #ff4600;
            }  
            .price-num {
                font-size: 28px;
                font-family: PingFang SC, PingFang SC-Semibold;
                font-weight: Semibold;
                text-align: left;
            }
            .price-label {
                font-size: 14px;
                font-family: PingFang SC, PingFang SC-Regular;
                font-weight: Regular;
                text-align: left;
                color: #181818;
            }
            .price-btn {
                width: 88px;
                height: 32px;
                border: 1px solid #0052d9;
                border-radius: 2px;
                font-size: 14px;
                font-family: PingFang SC, PingFang SC-Regular;
                font-weight: Regular;
                text-align: left;
                color: #0052d9;
                text-align: center;
                line-height: 32px;
            }
            .price-btn-on {
                background: #0052d9;
                color: #ffffff;
            }
        }
    }
}
.block-card-box {
    .card-l {
        width: calc(100% - 388px);
        
    }
    .card-r-notice {
        width: 388px;
        background: linear-gradient(180deg,#f0f3f7, #fbfcfd);
        border: 2px solid #ffffff;
        border-radius: 4px;
        box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
        .notice-list {
            background: #ffffff;
            border-radius: 4px;
            width: 100%;
            .notice-list-li {
                .li-txt {
                    width: calc(100% - 20px);
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Regular;
                    font-weight: Regular;
                    text-align: left;
                    color: #202020;
                }
            }
        }
        .notice-btn {
            .btn {
                width: 48%;
                height: 52px;
                background: #ffffff;
                border-radius: 4px;
                font-size: 16px;
                font-family: PingFang SC, PingFang SC-Semibold;
                font-weight: Semibold;
                text-align: left;
                color: #202020;
            }
        }
    }
}
.fast-box {
    .fast-tit {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #202020;
    }
    .fast-list {
        .fast-li {
            height: 28px;
            font-size: 14px;
            background: #dfe8fb;
            border-radius: 4px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: left;
            color: #0052d9;
            line-height: 28px;
        }
    }
}
.head-tit {
    font-size: 36px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: left;
    color: #202020;
    text-align: center;
}
.head-search-box {
    background: linear-gradient(180deg,#f0f3f7, #fbfcfd);
    border: 2px solid #ffffff;
    border-radius: 4px;
    box-shadow: 0px 10px 10px -2px rgba(0,0,0,0.05); 
    .search-ipt {
        background: #ffffff;
        .search-l {
            width: calc(100% - 120px);
            height: 56px;
            border: 1px solid #1752d9;
            border-radius: 4px 0 0 4px;
            .l-menu {
                .search-txt {
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Medium;
                    font-weight: Medium;
                    text-align: left;
                    color: #222426;
                }
            }
            .search-line {
                width: 1px;
                height: 29px;
                background-color: #e5e8eb;
            }
        }
        .search-btn {
            width: 120px;
            height: 56px;
            background: #0052d9;
            border-radius: 0px 4px 4px 0px;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: Medium;
            text-align: center;
            color: #ffffff;
            line-height: 56px;
        }

    }
}
.content {
    position: relative;
}
.head-bg {
    width: 100%;
    position: absolute;

}
</style>